<template>
    <div class="mobile-box">
        <div class="mobile-header">
            <span>当前用户：{{ user.userName }}</span>
            <div style="display: flex;align-items: center;">
                <span>用户组：</span>
                <el-select style="flex: 1;" size="mini" collapse-tags v-model="userGroupIdList" multiple placeholder="请选择用户组"
                    @change="groupChange">
                    <el-option v-for="(item, index) in groupList" :key="index" :label="item.bizUserGroupName"
                        :value="item.userGroupId"> </el-option>
                </el-select>
            </div>
        </div>
        <div class="mobile-card" v-for="(item, index) in tableData" :key="index" @click="handleJump(item)">
            <div class="card-title">
                <div class="card-name">{{ item.name }}</div>
                <el-link :type="statusEnum[item.userStatus].type">{{ statusEnum[item.userStatus].name }}</el-link>
            </div>
            <div class="card-cover" :style="{ backgroundImage: `url(${item.meetingImgUrl})` }">
                <i class="el-icon-video-play"></i>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getUserGroup,
    listByUserGroup
} from '@/api'
import { mapState } from 'vuex'
export default {
    data() {
        return {
            timer: null,
            tableData: [],
            statusEnum: {
                'OFFLINE': {
                    name: '离线',
                    type: 'info',
                },
                'ONLINE': {
                    name: '在线',
                    type: 'success'
                },
                'MEETING': {
                    name: '会议中',
                    type: 'danger',
                }
            },
            groupList: [],
            userGroupIdList: [],
        }
    },
    computed: {
        ...mapState(['user'])
    },
    mounted() {
        this.getGroupList().then(() => {
            this.userGroupIdList.length && this.getList()
            this.userGroupIdList.length && this.startPolling()
        })
    },
    beforeDestroy() {
        this.closeTimer()
    },
    methods: {
        async getGroupList() {
            await getUserGroup().then(res => {
                this.groupList = res.data
                if (this.groupList.length) {
                    this.userGroupIdList = this.groupList.map(item => item.userGroupId)
                }
            })
        },
        groupChange() {
            this.closeTimer()
            this.getList()
            this.startPolling()
        },
        getList() {
            listByUserGroup({
                userGroupIdList: this.userGroupIdList
            }).then(res => {
                res.data.forEach(item => {
                    if (item.userStatus == 'OFFLINE') {
                        item.selected = false
                        item.disabled = true
                    } else {
                        let isSelf = item.userId == this.user.id
                        let isMeeting = item.userStatus == 'MEETING'
                        item.disabled = isMeeting || isSelf
                        if (item.userType == '0' && isMeeting) {
                            item.disabled = false
                        }
                    }

                })
                this.tableData = res.data
            })
        },
        startPolling() {
            this.timer = setInterval(() => {
                this.getList()
            }, 10000);
        },
        // 进入会议室
        handleJump(item) {
            this.$router.push({
                path: '/room',
                query: {
                    code: item.meetingRoomCode,
                    sessionId: item.sessionId
                }
            })
        },
        closeTimer() {
            this.timer && clearInterval(this.timer)
            this.timer = null
        },
    }
}
</script>

<style lang="scss" scoped>
.mobile-box {
    flex: 1;
    height: 0;
    display: none;
    width: 100vw;
    padding: 0 15px 20px;
    overflow: hidden;
    overflow-y: auto;
}

.mobile-card {
    position: relative;
    margin: 20px 0 0;
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 0px rgba(119, 119, 119, 0.12);
    border-radius: 8px;

    .card-title {
        position: absolute;
        top: 10px;
        left: 10px;
        color: #fff;
        z-index: 99;
    }

    .card-cover {
        position: relative;
        width: 100%;
        padding-bottom: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        background-repeat: no-repeat;
        background-size: cover;

        i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 48px;
            color: #fff;
        }
    }
}


.mobile-header {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    row-gap: 5px;
}
</style>